<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCounterStore } from '../stores'

export default defineComponent({
    setup() {
        const router=useRouter()
        const route=useRoute()
        const store=useCounterStore()
        const {proxy}=getCurrentInstance()
        const labelPosition = ref('left')
        const taskName=ref('')
        const projectName=ref('')
        const projectType=ref('')
        const taskTime = ref('')
        const taskId = ref('')
        const userId=ref('')
        const projectId=ref('')
        const childTaskId=ref('')
        const childTaskName=ref('')
        const conscientious = ref('')
        const menuFlag=ref(store.flag)
        const dialogVisible=ref(false)
        const taskOptions=ref([
            {
                value: 'Option1',
                label: '标准项目',
            },
            {
                value: 'Option2',
                label: '团队项目',
            },
            {
                value: 'Option3',
                label: '个人工作',
            },
            {
                value: 'Option4',
                label: '家庭项目',
            },
            {
                value: 'Option5',
                label: '其他',
            }
        ])
        const updateBack=()=>{
            dialogVisible.value=true
        }
        const insertTask=()=>{
            let userName=sessionStorage.getItem('userName')
            proxy.$http.get(`system/user/get/${userName}`)
            .then(res=>{
                console.log(res.data[0].userId)
                userId.value=res.data[0].userId
            })
            proxy.$http.post(`system/project`,{
                'projectId':projectId.value,
                'projectName':projectName.value,
                'projectType':projectType.value,
                'userIds':[userId.value]
            }).then(res2=>{
                console.log(userId.value)
                proxy.$http.post(`system/task`,{
                    'taskId':taskId.value,
                    'taskName':taskName.value,
                    'workingHours':taskTime.value,
                    'conscientious':conscientious.value,
                    'projectIds':[projectId.value],
                    'userIds':[userId.value]
                }).then(res=>{
                    console.log(res)
                })
            })
             
        }
        const insertChildTask=()=>{
            proxy.$http.post(`system/subtask`,{
                'subtaskId':childTaskId.value,
                'subtaskName':childTaskName.value,
                'taskIds':[taskId.value],
            }).then(res=>{
                console.log(res)
            })
        }
        return{
            labelPosition,
            taskOptions,
            taskTime,
            taskName,
            taskId,
            userId,
            conscientious,
            projectName,
            projectType,
            projectId,
            dialogVisible,
            childTaskId,
            childTaskName,
            updateBack,
            insertTask,
            insertChildTask,
            menuFlag
        }
    },
})

</script>

<template>
    <el-card style="text-align:center" class="box-card">
        <div v-if="menuFlag">
        <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            style="max-width: 460px"
        >
            <el-form-item label="项目编号：">
                <el-input v-model="projectId" placeholder="请输入项目编号"></el-input>
            </el-form-item>
            <el-form-item label="项目名：">
                <el-input v-model="projectName" placeholder="请输入项目名"></el-input>
            </el-form-item>
            <el-form-item label="项目类型：">
                <el-select v-model="projectType" placeholder="选择任务类型">
                    <el-option
                    v-for="item in taskOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="任务编号：">
                <el-input v-model="taskId" placeholder="请输入任务编号"></el-input>
            </el-form-item>
            <el-form-item label="任务名：">
                <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
            </el-form-item>
            
            <el-form-item label="任务时长：">
                <el-input v-model="taskTime" placeholder="请输入任务时长"></el-input>
            </el-form-item>
            <el-form-item label="负责人：">
                <span style="float:left"></span><el-input v-model="conscientious" placeholder="请输入任务负责人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="insertTask()">新增</el-button>
            <el-button  @click="updateBack()">添加子任务</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div v-else>
            <h1>您尚未有权限创建任务！请联系负责人为您指派任务</h1>
        </div>
    </el-card>
    <el-dialog
            title="新增子任务"
            width="40%" v-model="dialogVisible">
            <el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px" class="grid2">
                <el-form-item label="主任务编号：">
                <el-input v-model="taskId"></el-input>
                </el-form-item>
                <el-form-item  label="子任务编号：">
                <el-input v-model="childTaskId"></el-input>
                </el-form-item>
                <el-form-item  label="子任务名：">
                <el-input v-model="childTaskName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible=false">取 消</el-button>
                    <el-button type="primary" @click="insertChildTask()" >确 定</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
</template>

<style scoped lang="scss">
    .container{
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }
    .container.content{
        flex:1
    }
    .container.content.item{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .container.content.item.item-title{
        flex: 1;
    }
    .container.content.item.item-title.taskfont{
        color: #bbb;
        font-size: 18px;
    }
    .el-input{
      width: 300px;
  }
  .box-card {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
</style>
